import { getOrderList, getStatusList } from "@/api/order";
import { Button, Space, Switch, Table, Form, Input, DatePicker, Select } from "antd";
import { useCallback, useEffect, useState } from "react"
import { FormOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
const { Option } = Select;
export default function OrderList() {
    const navigate = useNavigate();
    const [orderList, setorderList] = useState<any[]>([]);
    const [statusList, setStatusList] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const [statusLoading, setStatusLoading] = useState<boolean>(false);
    const [total, setTotal] = useState<number>(1);
    const [current, setCurrent] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(1);
    const getStatusListAsync = useCallback(async () => {
        const result: any = await getStatusList();
        setStatusList(result);
    }, [])
    const getOrderListAsync = useCallback(async (page: number, pageSize: number) => {
        try{
            setLoading(true);
            const searchOption = form.getFieldsValue(true);
            searchOption.createTimeBegin=searchOption.createTimeBegin?.format("YYYY-MM-DD");
            searchOption.createTimeEnd=searchOption.createTimeEnd?.format("YYYY-MM-DD");
            searchOption.reserveDate=searchOption.reserveDate?.format("YYYY-MM-DD");
          
    
    
            const result: any = await getOrderList(page, pageSize, searchOption);
            setLoading(false);
            setorderList(result.records);
            setTotal(result.total);
            setCurrent(result.current);
            setPageSize(result.size);
        
        }catch(err){
            setLoading(false);
        }
       
    }, [])

    useEffect(() => {
        getOrderListAsync(1, 5);
        getStatusListAsync();
    }, [])
    const [form] = Form.useForm();
    return (
        <Space direction="vertical" style={{ width: "100%" }}>
            <Form form={form} onFinish={() => {
                getOrderListAsync(1, pageSize);
            }} layout="inline">
                <Form.Item name="hosname" style={{width:"120px"}}>
                    <Input placeholder="医院名称" />
                </Form.Item>

                <Form.Item name="outTradeNo"  style={{width:"120px"}}>
                    <Input placeholder="订单号" />
                </Form.Item>

                <Form.Item name="patientName"  style={{width:"120px"}}>
                    <Input placeholder="就诊人姓名" />
                </Form.Item>

                <Form.Item name="createTimeBegin"  style={{width:"120px"}}>
                    <DatePicker placeholder="开始日期" />
                </Form.Item>

                <Form.Item name="createTimeEnd"  style={{width:"120px"}}>
                    <DatePicker placeholder="截止日期" />
                </Form.Item>

                <Form.Item name="reserveDate"  style={{width:"120px"}}>
                    <DatePicker placeholder="就诊时间" />
                </Form.Item>

                <Form.Item name="orderStatus">
                    <Select placeholder="订单状态">
                        {statusList.map((item: any) => {
                            return (
                                <Option value={item.status} key={item.status}>
                                    {item.comment}
                                </Option>
                            );
                        })}
                    </Select>
                </Form.Item>

                <Form.Item>
                    <Space>
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                        查询
                    </Button>
                    <Button onClick={() => form.resetFields()}>清空</Button>
                    </Space>
                
                </Form.Item>
            </Form>
            <Table loading={loading} rowKey={"id"} dataSource={orderList}
                pagination={{
                    current,
                    pageSize,
                    total,
                    onChange: getOrderListAsync
                }}
                columns={[
                    {
                        title: "序号",
                        align: "center",
                        render(values, rows, index) {
                            return (current - 1) * pageSize + index + 1
                        }
                    },
                    {
                        title: "订单交易号",
                        align: "center",
                        dataIndex: "outTradeNo",
                        key: "outTradeNo",
                      },
                      { title: "医院名称", 
                      align: "center", dataIndex: "hosname", key: "hosname" },
                  
                      {
                        title: "科室名称", align: "center",
                        key: "depname",
                        dataIndex: "depname",
                      },
                      {
                        title: "医生职称", align: "center",
                        dataIndex: "title",
                        key: "title",
                      },
                      {
                        title: "安排时间", align: "center",
                        dataIndex: "fetchTime",
                        key: "fetchTime",
                      },
                      {
                        title: "就诊人", align: "center",
                        dataIndex: "patientName",
                        key: "patientName",
                      },
                      {
                        title: "预约号序", align: "center",
                        dataIndex: "number",
                        key: "number",
                      },
                      {
                        title: "服务费(元)", align: "center",
                        dataIndex: "amount",
                        key: "amount",
                      },
                      {
                        title: "订单状态", align: "center",
                        key: "orderStatusString",
                        render: (row: any) => row.param.orderStatusString,
                      },
                      {
                        title: "创建时间", align: "center",
                        dataIndex: "createTime",
                        key: "createTime",
                      },
                      {
                        title: "操作", align: "center",
                        key: "operator",
                        render: (row: any) => {
                          return (
                            <>
                              <Button type="primary" onClick={() => navigate(`/order/show/${row.id}`)}>
                                查看
                              </Button>
                            </>
                          );
                        },
                      }
                ]}></Table>
        </Space>
    )
}